<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    {include file="/layout/scriptload"}
    <title>
        南讯公众号管理平台
    </title>
    <style>
        .tab_top{
            min-width: 100px;height: 50px;cursor: default;line-height: 30px;text-align: center;border-right: 1px solid #17B294;color: #ffffff;padding: 10px 20px 10px 15px;
        }
        .tab_top_active{background: #16A98C;}
        .remove_x{color: #ffffff;font-size: 16px;cursor: pointer;position: absolute;top: 17px;right: 10px;}
        .tab_top_all{min-width: 100px;height: 50px;float: left;position: relative}
        .tab_all{min-width: 200px;max-width: 100%;height: 50px;float: left;overflow: hidden;}
        .tab_top_box{width: 70%;height: 50px;float: left;}
    </style>
</head>
<body class="hold-transition skin-green-light sidebar-mini">
<div class="wrapper">
    <header class="main-header">
        <a href="" class="logo" style="background-color: #18bc9c;line-height:normal;">
            <span class="logo-mini" style="line-height: 50px;"><b>NX</b></span>
            <span class="logo-lg"><img src="/../static/img/logo.png" style="height: 50px;line-height: normal;"></span>
        </a>
        <nav class="navbar navbar-static-top" style="background-color: #18bc9c">
            <a href="#" class="sidebar-toggle" style="height: 50px;line-height: 20px;" data-toggle="push-menu" role="button">
                <span class="sr-only">Toggle navigation</span>
            </a>
            <!-- 导航栏 -->
            <div class="tab_top_box">
                <div class="tab_all"></div>
            </div>
            <!--end-->
            <script>
                $(function () {
                    $('.tab_all').on('click', ".remove_x", function(){
                        var $_this = $(this);
                        var _id = $_this.attr('ids');
                        var node = $('#'+_id);
                        if(node.is(':hidden')){
                            $_this.parent().remove();
                            node.remove();
                        }else{
                            $_this.parent().prev('.tab_top_all').children('.tab_top').css('background','#16A98C');
                            node.prev('.childFrm').show();
                            $_this.parent().remove();
                            node.remove();
                        }
                    });
                    $('.tab_all').on('click','.tab_top',function () {
                        var $_this = $(this);
                        $('.tab_top').css('background','#18bc9c');
                        $_this.css('background','#16A98C');
                        var _id = $_this.attr('ids');
                        $('.childFrm').hide();
                        $('#'+_id).show();
                    })
                })
            </script>
            <div class="navbar-custom-menu">
                <ul class="nav navbar-nav">
                    <li class="dropdown messages-menu">
                        <a id="close_all" onclick="closeall()" title="关闭所有窗口" class="dropdown-toggle" data-toggle="dropdown">
                            <i class="fa fa-outdent"></i>
                        </a>
                    </li>
                    <script>
                        function closeall() {
                            $('.tab_top_all').remove();
                            $('.ifame').remove();
                            $('.childFrm').show();
                        }
                    </script>
                    <li class="dropdown user user-menu">
                        <a href="#" class="dropdown-toggle" data-toggle="dropdown">
                            <img src="{$userinfo.pic}" class="user-image" alt="User Image">
                            <span class="hidden-xs">{$userinfo.username}</span>
                        </a>
                        <ul class="dropdown-menu">
                            <li class="user-header" style="background-color: #18bc9c">
                                <img src="{$userinfo.pic}" class="img-circle" alt="User Image">
                                <p>
                                    南讯——{$userinfo.username}
                                    <small>{$time}</small>
                                </p>
                            </li>
                            <li class="user-footer">
                                <div class="pull-left">
                                    <a href="#" id="edit_info" class="btn btn-default btn-flat">个人资料</a>
                                </div>
                                <div class="pull-right">
                                    <a href="#" id="login_out" class="btn btn-default btn-flat">退出</a>
                                </div>
                            </li>
                            <script>
                                $(function () {
                                    $('#edit_info').click(function(){
                                        var _url = '{:url("/admin/adminindex/editInfo")}'
                                        layerWindow('修改资料',_url,'20%','50%');
                                    });
                                    $('#login_out').click(function(){
                                        $.ajax({
                                            type:'post',
                                            cache: false,
                                            url: '{:url("admin/User/loginOut")}',
                                            success: function(res){
                                                if(res.msg === 'ok'){
                                                    layerAlert('退出成功',function(){
                                                        window.location.reload();
                                                    })
                                                }
                                            }
                                        })
                                    });
                                })
                            </script>
                        </ul>
                    </li>
                    <li>
                        <a href="#" data-toggle="control-sidebar"><i class="fa fa-gears"></i></a>
                    </li>
                </ul>
            </div>
        </nav>
    </header>
    <aside class="main-sidebar">
        <div style="position: relative;overflow: hidden;width: auto;height: 888px;overflow-y:auto;">
        <section class="sidebar" style="height: 888px;overflow: hidden;width: auto;">
            <div class="user-panel">
                <div class="pull-left image">
                    <img src="{$userinfo.pic}" class="img-circle" alt="User Image">
                </div>
                <div class="pull-left info">
                    <p>{$userinfo.username}</p>
                    <a href="#"><i class="fa fa-circle text-success" style="color: #18bc9c;"></i> 在线</a>
                </div>
            </div>
            <form action="#" method="get" class="sidebar-form">
                <div class="input-group">
                    <input type="text" name="q" class="form-control" placeholder="Search...">
                    <span class="input-group-btn">
                <button type="submit" name="search" id="search-btn" class="btn btn-flat"><i class="fa fa-search"></i>
                </button>
                </button>
              </span>
                </div>
            </form>
            <ul class="sidebar-menu" data-widget="tree">
                <!--遍历模块列表-->
                {volist name='olist' id='v'}
                <li class="treeview">
                    <a href="#" class="route_o" r="{$v.route}" style="height: 50px;line-height: 26px;">
                        <i class="fa {$v.icon}"></i> <span>{$v.title}</span>
                        <span class="pull-right-container">
                              <i class="fa fa-angle-left pull-right"></i>
                        </span>
                    </a>
                    <ul class="treeview-menu">
                        {volist name='tlist' id='vo'}
                            {if condition="$vo.pid eq $v.id "}
                                <li class="route_t" r="{$vo.route}">
                                    <a href="#" style="height: 50px;line-height: 40px;">
                                        <i class="fa fa-circle-o"></i>
                                        {$vo.title}
                                    </a>
                                </li>
                            {/if}
                        {/volist}
                    </ul>
                </li>
                {/volist}
                <!--end-->
            </ul>
        </section>
        </div>
    </aside>
    <div class="content-wrapper" id="content">
    </div>
    <script>
        var _num = 0;
        $(function(){
            $('.route_o').click(function(){
                var $_this = $(this);
                var r = $_this.attr('r');
                if(r !=''){
                    var text = $_this.text();
                    var ur = "../"+r;
                    _num = _num + 1;
                    $('.tab_top').css('background','#18bc9c');
                    var html  = '<div class="tab_top_all">'
                    html  += '<div class="tab_top tab_top_active" ids="ifame'+_num+'">';
                    html  += '<i class="fa fa-circle-o"></i>';
                    html  += '<span style="padding: 0px 5px;">'+text+'</span>';
                    html  += '</div>';
                    html  += '<i ids="ifame'+_num+'" class="remove_x">×</i>';
                    html  += '</div>';
                    $('.tab_all').append(html);
                    $('.childFrm').hide();
                    var htmliframe = '<iframe frameborder="0" class="childFrm ifame" id="ifame'+_num+'" src="'+ur+'" width="100%" height="880" ></iframe>';
                    $('#content').append(htmliframe);
                }
            });
            $('.route_t').click(function(){
                _num = _num + 1;
                var $_this = $(this);
                var r = $_this.attr('r');
                var ur = "../"+r;
                var text = $_this.text();
                $('.tab_top').css('background','#18bc9c');
                var html  = '<div class="tab_top_all">'
                html  += '<div class="tab_top tab_top_active" ids="ifame'+_num+'">';
                html  += '<i class="fa fa-circle-o"></i>';
                html  += '<span style="padding: 0px 5px;">'+text+'</span>';
                html  += '</div>';
                html  += '<i ids="ifame'+_num+'" class="remove_x">×</i>';
                html  += '</div>';
                $('.tab_all').append(html);
                $('.childFrm').hide();
                var htmliframe  = '<iframe frameborder="0" class="childFrm ifame" id="ifame'+_num+'" src="'+ur+'" width="100%" height="880" ></iframe>';
                $('#content').append(htmliframe);
            })
        });
    </script>
</div>
</body>
</html>
